<template>
  <div class="content">
    <BreadNav
      :location="location"
      :routers="routers"
    />
    <main>
      <article>
        <div class="container">
          <p>
            Hello~欢迎您，来到我的个人博客，你将成为我生命中一个重要的过客，我们之所以是过客，是因为你未曾会为我停留。——2021年12月27日
          </p>
          <div class="contact_information">联系方式：qq:1597993292</div>
          <div class="comment">
            <h2>
              网友留言
              <div class="img"><img
                  src="../assets/animate.gif"
                  alt=""
                /></div>
            </h2>
            <div>
              <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                v-model="content"
                placeholder="我来说两句~"
              ></textarea>
            </div>
            昵称：<input
              type="text"
              v-model="name"
            />
            <tr />
            邮箱：<input
              type="text"
              v-model="email"
            />
            <p>
              <button @click="commit">提交</button>
            </p>
          </div>
          <div class="comment_list_box">
            <p class="common_num">共 {{ commentList.length }} 条评论</p>
            <div class="comment_list_body">
              <ul>
                <li
                  v-for="(item, index) in commentList"
                  :key="index"
                >
                  <a href="">
                    <img
                      src="../assets/touxiang.png"
                      alt=""
                    />
                  </a>
                  <div class="common_right">
                    <a href="">{{ item.name }}</a>
                    <p>{{ item.content }}</p>
                    <p>
                      <span class="common_time"> {{ item.created_at }} </span>
                      <span
                        class="apply"
                        @click="showApply(index)"
                      >回复</span>
                    </p>
                    <div
                      class="apply_box"
                      v-if="index === currentIndex"
                    >
                      <textarea
                        name=""
                        id=""
                        placeholder="回复~"
                        cols="30"
                        rows="10"
                      ></textarea>
                      <p>
                        <button>提交</button>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <aside>
        <AsidePics />
      </aside>
    </main>
    <Footer />
  </div>
</template>

<script>
import BreadNav from '@/components/BreadNav.vue'
import Footer from '@/components/Footer.vue'
import AsidePics from '@/components/AsidePics.vue'
import { commentMessage, getMessage } from '@/api/message'
export default {
  components: {
    BreadNav,
    Footer,
    AsidePics
  },
  data() {
    return {
      location: '留言板',
      routers: 'liuyan',
      currentIndex: null,
      email: '',
      name: '',
      content: '',
      commentList: []
    }
  },
  async created() {
    const res = await getMessage()
    this.commentList = res.data.data
  },
  methods: {
    showApply(e) {
      this.currentIndex = e === this.currentIndex ? null : e
    },
    commit() {
      if (!(this.name && this.email && this.content)) {
        alert('请输入完整信息')
        return
      }
      const opt = {
        name: this.name,
        email: this.email,
        content: this.content
      }
      commentMessage(opt).then(res => {
        this.name = ''
        this.email = ''
        this.content = ''
        alert(res.data.message)
      })
      // const opt = {
      //   name: this.name,
      //   email: this.email,
      //   content: this.content
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
// 宽度大于1201px时
@media screen and (min-width: 1201px) {
  .content {
    width: 1200px;
    margin: 0 auto;
  }
}

// 宽度小于1200px时
@media screen and (max-width: 1200px) {
  .content {
    margin: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  article {
    width: 100%;
  }
  aside {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .content {
    margin: 0 15px;
  }
  body .content main article .container {
    padding: 20px 12px;
    .comment {
      h2:before {
        left: -12px;
      }
    }
  }
}

.content {
  main {
    display: flex;
    article {
      width: 860px;
      .container {
        background: #fff;
        padding: 20px;
        border-radius: 3px;
        .contact_information {
          font-size: 16px;
          line-height: 24px;
        }
        .comment {
          h2 {
            margin: 10px 0 20px;
            position: relative;
            display: flex;
            align-items: center;
            .img {
              width: 50px;
              height: 50px;
              overflow: hidden;
              img {
                width: 50px;
                transform: scale(1.5);
              }
            }
          }
          h2:before {
            content: '';
            position: absolute;
            background: #f00;
            width: 4px;
            height: 100%;
            left: -20px;
            bottom: 0;
          }
        }
        .comment_list_box {
          width: 100%;
          border: 1px solid #ddd;
          margin: 60px 0 15px;
          overflow: hidden;
          padding-bottom: 20px;
          border-radius: 3px;
          .common_num {
            background: #fbfbfb;
            color: #555;
            font-size: 14px;
            padding: 0 12px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dotted #ddd;
          }
          .comment_list_body {
            ul {
              padding: 0 12px;
              li {
                padding: 10px 0;
                border-bottom: 1px dotted #ddd;
                overflow: hidden;
                display: flex;
                img {
                  height: 50px;
                  aspect-ratio: auto 35 / 35;
                  width: 50px;
                }
                .common_right {
                  width: 80%;
                  margin-left: 10px;
                  p {
                    font-size: 14px;
                    line-height: 1.5em;
                    color: #666;
                    margin: 5px 0;
                    .common_time {
                      font-size: 12px;
                      color: #999;
                    }
                    .apply {
                      cursor: pointer;
                      font-size: 12px;
                      color: #999;
                      margin: 0 5px;
                    }
                  }
                }
              }
            }
          }
        }

        textarea {
          width: 98%;
          position: relative;
          margin: 10px 0;
          height: 78px;
          border: 1px solid #ccc;
          padding: 5px 5px;
          outline: none;
          color: #333;
          line-height: 20px;
          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 13px;
          resize: vertical;
          border-radius: 3px;
        }
        input {
          line-height: 13px;
          height: 20px;
          font-size: 13px;
          margin-top: 10px;
          outline: none;
          color: #333;
          border: 1px solid #ccc;
          border-radius: 3px;
          padding-left: 5px;
        }
        p {
          // display: inline-block;
          position: relative;
          button {
            cursor: pointer;
            background-position: 0 -15px;
            color: #121212;
            background-color: #e6e6e6;
            background-image: linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);
            background-repeat: no-repeat;
            border-bottom-right-radius: 3px;
            border-color: #ddd #ddd #aaa;
            border-style: solid;
            border-width: 1px;
            box-shadow: 0 0 1px #fff inset;
            color: #555;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 14px;
            height: 32px;
            position: absolute;
            right: 0;
            text-align: center;
            text-shadow: 0 1px 0 #fff;
            // top: 0;
            transition: all 0.15s linear 0s;
            width: 100px;
            cursor: pointer;
            border-radius: 2px;
            margin-top: 5px;
            outline: none;
          }
        }
        .apply_box {
          padding-bottom: 40px;
          width: 100%;
        }
      }
    }
    aside {
      width: 320px;
      margin-left: 20px;
    }
  }
}
</style>
